<template>
    <div class="Navigation">
        <el-card class="card" style="height: 500px; width: 1000px">
            <nav class="nav" style="margin-left: 40px">
                <a
                    href="#"
                    id="DataVisual"
                    @click="change('DataVisual')"
                    :class="classObj.DataVisual"
                    active-color="#3F51B5"
                    >大数据可视化</a
                >
                <a
                    href="#"
                    id="Production_Manage"
                    @click="change('Production_Manage')"
                    :class="classObj.Production_Manage"
                    active-color="green"
                    >生产管理</a
                >
                <a
                    href="#"
                    id="Device_Manage"
                    @click="change('Device_Manage')"
                    :class="classObj.Device_Manage"
                    active-color="#03A9F4"
                    >设备管理</a
                >
                <a
                    href="#"
                    id="Video_Manage"
                    @click="change('Video_Manage')"
                    :class="classObj.Video_Manage"
                    active-color="#673AB7"
                    >视频管理</a
                >
                <a
                    href="#"
                    id="Info_Manage"
                    @click="change('Info_Manage')"
                    :class="classObj.Info_Manage"
                    active-color="green"
                    >信息管理</a
                >
                <a
                    href="#"
                    id="Warn"
                    @click="change('Warn')"
                    :class="classObj.Warn"
                    active-color="#03A9F4"
                    >预测预警</a
                >
                <a
                    href="#"
                    id="Roots"
                    @click="change('Roots')"
                    :class="classObj.Roots"
                    active-color="#03A9F4"
                    >溯源管理</a
                >
                <a
                    href="#"
                    id="Visual_Platform"
                    @click="change('Visual_Platform')"
                    :class="classObj.Visual_Platform"
                    active-color="orange"
                    >可视化平台</a
                >
                <span class="nav-indicator"></span>
            </nav>
            <div v-for="item in navList" :key="item.key">
                <div
                    v-if="
                        item.key === 'Production_Manage' &&
                        nowlocat === item.key
                    "
                    class="theTest"
                >
                    <el-card
                        style="margin-top: 30px; height: 350px; width: 32%"
                        class="imagecard"
                    >
                        <h2 style="text-align: center; margin-bottom: 20px">
                            养殖后台
                        </h2>
                        <img
                            :src="item.subMenu[0].url"
                            style="width: 100%; height: 100%"
                            @click="
                                tohere(
                                    item.subMenu[0].local,
                                    item.subMenu[0].key
                                )
                            "
                        />
                    </el-card>
                    <el-card
                        style="margin-top: 30px; height: 350px; width: 32%"
                        class="imagecard"
                    >
                        <h2 style="text-align: center; margin-bottom: 20px">
                            屠宰后台
                        </h2>
                        <img
                            :src="item.subMenu[1].url"
                            style="width: 100%; height: 100%"
                            @click="
                                tohere(
                                    item.subMenu[1].local,
                                    item.subMenu[1].key
                                )
                            "
                        />
                    </el-card>
                    <el-card
                        style="margin-top: 30px; height: 350px; width: 32%"
                        class="imagecard"
                    >
                        <h2 style="text-align: center; margin-bottom: 20px">
                            加工后台
                        </h2>
                        <img
                            :src="item.subMenu[2].url"
                            style="width: 100%; height: 100%"
                            @click="
                                tohere(
                                    item.subMenu[2].local,
                                    item.subMenu[2].key
                                )
                            "
                        />
                    </el-card>
                </div>
                <el-card
                    v-else-if="nowlocat === item.key"
                    style="margin-top: 30px; height: 350px"
                    class="imagecard"
                >
                    <img
                        :src="item.url"
                        width="100%"
                        height="310px"
                        style=" object-fit: fill"
                        @click="tohere(item.local, item.key)"
                    />
                </el-card>
            </div>
        </el-card>
        <p style="color: white" class="source">@ 仲恺农业工程学院</p>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
    name: "Navigation",
    data() {
        return {
            msg: "导航页面",
            nowlocat: "DataVisual",
            navList: [
                {
                    key: "DataVisual",
                    url: require("@/assets/image/dataShow.jpg"),
                    local: "/DataVisual",
                },
                {
                    key: "Production_Manage",
                    subMenu: [
                        {
                            key: "Dovecote",
                            url: require("@/assets/image/breed.jpg"),
                            local: "/InfoManage",
                        },
                        {
                            key: "Slaughter",
                            url: require("@/assets/image/proAndSlo.jpg"),
                            local: "/Slaughter",
                        },
                        {
                            key: "Process",
                            url: require("@/assets/image/proAndSlo.jpg"),
                            local: "/Process",
                        },
                    ],
                },
                {
                    key: "Device_Manage",
                    url: require("@/assets/image/deviceManage.jpg"),
                    local: "/Dervice/DerviceManage",
                },
                {
                    key: "Video_Manage",
                    url: require("@/assets/image/videoManage.jpg"),
                    local: "/Video/VideoManage",
                },
                {
                    key: "Info_Manage",
                    url: require("@/assets/image/infoManage.jpg"),
                    local: "/InfoManage",
                },
                {
                    key: "Warn",
                    url: require("@/assets/image/warn.jpg"),
                    local: "/Warn/Warning",
                },
                {
                    key: "Roots",
                    url: require("@/assets/image/roots.png"),
                    local: "/Roots/RootsMange",
                },
                {
                    key: "Visual_Platform",
                    url: require("@/assets/image/breed.jpg"),
                    local: "/VisualPlatform",
                },
            ],
            classObj: {
                DataVisual: {
                    nav_item: true,
                    is_active: false,
                    show: true,
                },
                Production_Manage: {
                    nav_item: true,
                    is_active: true,
                    show: false,
                },
                Device_Manage: {
                    nav_item: true,
                    is_active: false,
                    show: false,
                },
                Visual_Platform: {
                    nav_item: true,
                    is_active: false,
                    show: false,
                },
                Video_Manage: {
                    nav_item: true,
                    is_active: false,
                    show: false,
                },
                Info_Manage: {
                    nav_item: true,
                    is_active: false,
                    show: false,
                },
                Warn: {
                    nav_item: true,
                    is_active: false,
                    show: false,
                },
                Roots: {
                    nav_item: true,
                    is_active: false,
                    show: false,
                },
            },
        };
    },
    mounted() {
        this.change();
    },
    methods: {
        ...mapMutations([
            "isShowBaseChoice",
            "isShowBaseChoiceInput",
            "isShowSlaughterChocie",
            "isShowSlaughterChocieInput",
            "isShowProcessChoice",
            "isShowProcessChoiceInput",
            "setnow",
        ]),

        change(name) {
            name = name || "DataVisual";
            this.nowlocat = name;
            Object.keys(this.classObj).forEach((item) => {
                this.classObj[item].is_active = false;
                document.getElementById(item).removeAttribute("style");
            });
            let el = document.getElementById(name);
            const indicator = document.querySelector(".nav-indicator");
            indicator.style.width = `${el.offsetWidth}px`;
            indicator.style.left = `${el.offsetLeft}px`;
            indicator.style.backgroundColor = el.getAttribute("active-color");
            el.classList.add("is_active");
            el.style.color = el.getAttribute("active-color");
        },

        tohere(url, key) {
            switch (key) {
                case "DataVisual":
                    this.setnow("DataVisual");
                    break;
                case "Dovecote":
                    this.setnow("Dovecote");
                    this.$store.commit("setshowWorkTab", false);
                    break;
                case "Slaughter":
                    this.setnow("Slaughter");
                    break;
                case "Process":
                    this.setnow("Process");
                    break;
                case "Device_Manage":
                    this.setnow("Device_Manage");
                    break;
                case "Video_Manage":
                    this.setnow("Video_Manage");
                    break;
                case "Info_Manage":
                    this.setnow("Info_Manage");
                    this.$store.commit("setshowWorkTab", false);
                    break;
                case "Warn":
                    this.setnow("Warn");
                    break;
                case "Roots":
                    this.setnow("Roots");
                    break;
                case "Visual_Platform":
                    this.setnow("Visual_Platform");
                    break;
            }

            // 保存当前位置
            window.sessionStorage.setItem("CurrentPlace", key);

            this.isShowBaseChoice(key);
            this.isShowBaseChoiceInput(key);

            this.isShowProcessChoice(key);
            this.isShowProcessChoiceInput(key);

            this.isShowSlaughterChocie(key);
            this.isShowSlaughterChocieInput(key);

            this.$router.push(url);
        },
    },
};
</script>

<style lang="scss" scoped>
.theTest {
    display: flex;
    justify-content: space-between;
}
* {
    box-sizing: border-box;
}
.source {
    position: absolute;
    font-size: 16px;
    bottom: 0;
}
.card {
    opacity: 0.9;
    display: flex;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}
.el-card {
    min-height: 0 !important;
}
.imagecard:hover {
    cursor: pointer;
}
.Navigation {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    background-image: url("../../assets/image/login.jpg");
    background-size: cover;
}
.nav {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background-color: #fff;
    padding: 0 20px;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
}
.nav_item {
    color: #83818c;
    padding: 20px;
    text-decoration: none;
    transition: 0.3s;
    margin: 0 6px;
    z-index: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #dfe2ea;
        border-radius: 8px 8px 0 0;
        opacity: 0;
        transition: 0.3s;
    }
}

.nav_item:not(.is_active):hover:before {
    opacity: 1;
    bottom: 0;
}

.nav_item:not(.is_active):hover {
    color: #333;
}

.nav-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    transition: 0.4s;
    height: 5px;
    z-index: 1;
    border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
    .nav {
        overflow: auto;
    }
}
</style>